<template>
    <el-main>
        <!-- 面包屑 -->
        <el-row style="margin-bottom: 20px">
            <el-col :span="2">
                <div class="grid-content bg-purple-dark el-icon-menu"></div>
            </el-col>
        </el-row>

        <head-table></head-table>
       
        <!-- 用户信息列表 -->
        <el-table id="out-table" ref="multipleTable" :data="tableData" tooltip-effect="dark" @selection-change="handleSelectionChange"
            v-loading="loading" border>
            <el-table-column type="selection" width="40">
            </el-table-column>
            <el-table-column prop="id" label="id" width="50">
            </el-table-column>
            <el-table-column prop="name" label="用户名" width="140">
            </el-table-column>
            <el-table-column prop="pwd" label="密码" width="120">
            </el-table-column>
            <el-table-column prop="sex" label="性别" width="50">
            </el-table-column>
            <el-table-column prop="phone" label="手机号码">
            </el-table-column>
            <el-table-column prop="birth" label="出生日期">
            </el-table-column>
            <el-table-column prop="email" label="电子邮箱">
            </el-table-column>
            <el-table-column prop="role" label="角色">
            </el-table-column>
            <el-table-column prop="deid" label="部门id">
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="160">
                <template slot-scope="scope">
                    <el-button @click="handleDelete()" type="danger" size="mini">删除</el-button>
                    <el-button @click="handleEdit('编辑')" type="primary" size="mini">编辑</el-button>
                </template>
            </el-table-column>
            <el-table-column prop="logintime" label="登录时间">
            </el-table-column>
            <el-table-column prop="crtm" label="添加时间">
            </el-table-column>
            <el-table-column prop="mdtm" label="修改时间">
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="paginations.current_page"
            :page-sizes="paginations.page_sizess" :page-size="paginations.page_size" :layout="paginations.layout"
            :total="tableData.length">
        </el-pagination>

        <!-- 删除弹出框 -->
        <el-dialog title="" :visible.sync="dialogVisible" width="30%" :before-close="handleClose">
            <span>你是否要删除该条记录</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleDeleteOne('1')">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 编辑弹出框 -->
        <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
            <el-form :model="form" :rules="rules">
                <el-form-item label="用户名" :label-width="formLabelWidth" prop="name">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" :label-width="formLabelWidth" prop="pwd">
                    <el-input v-model="form.pwd" autocomplete="off" type="password"></el-input>
                </el-form-item>
                <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
                    <el-radio-group v-model="form.sex" size="medium">
                        <el-radio border label="男"></el-radio>
                        <el-radio border label="女"></el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
                    <el-input v-model="form.phone" autocomplete="off" type="text"></el-input>
                </el-form-item>
                <el-form-item label="出生日期" :label-width="formLabelWidth" prop="birth">
                    <el-date-picker type="date" placeholder="选择日期" v-model="form.birth" style="width: 100%;"></el-date-picker>
                </el-form-item>
                <el-form-item label="电子邮箱" :label-width="formLabelWidth" prop="email">
                    <el-input v-model="form.email" autocomplete="off" type="email"></el-input>
                </el-form-item>
                <el-form-item label="角色" :label-width="formLabelWidth" prop="role">
                    <el-input v-model="form.role" autocomplete="off" type="text"></el-input>
                </el-form-item>
                <el-form-item label="部门" :label-width="formLabelWidth" prop="deid">
                    <el-input v-model="form.deid" autocomplete="off" type="text"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleEditOne('id')">确 定</el-button>
            </div>
        </el-dialog>


    </el-main>
</template>

<script>
    import FileSaver from 'file-saver'
    import XLSX from 'xlsx'
    import axios from 'axios'
    import headTable from '@/common/headTable'
    import exportExcel from '@/utils/excel'
    export default {
        name: 'User',
        components:{
            headTable
        },
        data() {
            var validateEmail = (rule, value, callback) => {
                let mal = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;
                if (!value) {
                    return callback(new Error('不能为空'));
                }
                if (!(mal.test(value))) {
                    callback(new Error('请输入正确邮箱'));
                } else {
                    callback();
                };
            }
            return {
                multipleSelection: [],
                paginations: {
                    total: 0,
                    current_page: 1,
                    page_sizes: [10, 20, 30, 40],
                    page_size: 10,
                    layout: "total, sizes, prev, pager, next, jumper"
                },
                tableData: [],
                dialogVisible: false,
                dialogFormVisible: false,
                form: {
                    name: '',
                    pwd: '',
                    sex: '',
                    phone: '',
                    birth: '',
                    email: '',
                    role: '',
                    deid: ''
                },
                formLabelWidth: '120px',
                loading: false,
                dialogTitle: '',
                input: '',
                rules: {
                    name: [{
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur'
                    }],
                    pwd: [{
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur'
                    }],
                    sex: [{
                        required: true,
                        message: '请选择性别',
                        trigger: 'change'
                    }],
                    phone: [{
                        required: true,
                        max: 11,
                        min: 11,
                        message: '请输入11位手机号码',
                        trigger: 'blur'
                    }],
                    birth: [{
                        type: 'date',
                        message: '请输入日期',
                        trigger: 'blur'
                    }],
                    email: [{
                        validator: validateEmail,
                        trigger: 'blur'
                    }]

                }

            }
        },
        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleSizeChange(val) {
                console.log(val)

            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            },
            handleDelete() {
                this.dialogVisible = true
            },
            handleEdit(title) {
                this.dialogTitle = title
                this.dialogFormVisible = true
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        done();
                    })
                    .catch(_ => {});
            },
            // 删除一条记录
            handleDeleteOne(id) {
                console.log(id)
                this.dialogVisible = false
                setTimeout(() => {
                    this.$message({
                        message: '删除成功',
                        type: 'success'
                    });
                }, 500);

            },
            // 编辑一条记录
            handleEditOne(id) {

                if (this.dialogTitle === '添加') {
                    console.log('添加')
                    this.dialogFormVisible = false
                } else {
                    console.log('编辑')
                    this.dialogFormVisible = false
                }

            },
            // search
            handleSearch() {
                this.$message('test')
            },

            getAllUser() {
                this.loading = true
                axios.get(global.url + '/user')
                    .then(this.handleGetAllUser)
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            handleGetAllUser(response) {
                this.loading = false
                let data = response.data
                if (data.code === 2000 && data.count > 0) {
                    this.tableData = data.data
                }
            }
        },
        mounted() {
            this.getAllUser()
        }
    }
</script>

<style scoped>
</style>